import React from "react";
import { Container } from './MenuBarStyle'  // css 模块化

import Scroll from '../../../baseUI/scroll/index'

import card1 from '../../../assets/mainIconfont/card1.png'
import card2 from '../../../assets/mainIconfont/card2.png'
import card3 from '../../../assets/mainIconfont/card3.gif'
import card4 from '../../../assets/mainIconfont/card4.png'
import card5 from '../../../assets/mainIconfont/card5.png'
import card6 from '../../../assets/mainIconfont/card6.png'
import card7 from '../../../assets/mainIconfont/card7.png'
import card8 from '../../../assets/mainIconfont/card8.png'
import card9 from '../../../assets/mainIconfont/card9.png'
import card10 from '../../../assets/mainIconfont/card10.png'


const MenuBar = () => {

	

	const onScroll = () => {
		console.log('scroll,--------------');
	}
	return (
		<Container>

			<div className="swiper">
				<Scroll  direction={"horizental"}>
					<div className="box">
						<div className="wrapper">
							<div>
								<img src={card1} alt="" />
								<div><span>小米上新</span></div>
							</div>
							<div>
								<img src={card2} alt="" />
								<div><span>手机</span></div>
							</div>
							<div>
								<img src={card3} alt="" />
								<div><span>XIAO</span></div>
							</div>
							<div>
								<img src={card4} alt="" />
								<div><span>电视</span></div>
							</div>
							<div>
								<img src={card5} alt="" />
								<div><span>大家电</span></div>
							</div>
						</div>
						<div className="wrapper">
							<div>
								<img src={card6} alt="" />
								<div><span>米金商城</span></div>
							</div>
							<div>
								<img src={card7} alt="" />
								<div><span>小米众筹</span></div>
							</div>
							<div>
								<img src={card8} alt="" />
								<div><span>电脑</span></div>
							</div>
							<div>
								<img src={card9} alt="" />
								<div><span>生活电器</span></div>
							</div>
							<div>
								<img src={card10} alt="" />
								<div><span>智能家居</span></div>
							</div>
						</div>
					</div>

				</Scroll>
			</div>

		</Container>
	)
}

export default MenuBar